<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="5" :xs="24">
                <el-card shadow="never" class="projectCard">
                    <div class="projectManage">
                            <el-tabs v-model="ownType" @tab-click="handleClick" >
                                <el-tab-pane label="机构项目" name="1"><project-list :projectList="porpData.projectListData1" :projectType="1" @listenProject="showProject" @on-return-data="onReturn" /></el-tab-pane>
                                <el-tab-pane label="参与项目" name="2"><project-list :projectList="porpData.projectListData2" :projectType="2" @listenProject="showProject" @on-return-data="onReturn"  /></el-tab-pane>
                                <!-- <el-tab-pane label="所有项目" name="3"><project-list :projectList="porpData.projectListData3" :projectType="3" @listenProject="showProject" @on-return-data="onReturn"  /></el-tab-pane> -->
                            </el-tabs>   
                            <div class="addPro">
                                <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd($event)">新建项目</el-button>
                            </div>
                    </div>
                </el-card>
                <el-card shadow="never" class="projectCard proDatail">
                    <div slot="header" class="DatailCard">
                        <span>项目详情</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="handleUpdateProject(projectDatail.projectId)" >编辑</el-button>
                    </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <label title="项目名称">项目名称:</label>
                                <div class="pull-left" :title="projectDatail.projectName" >{{ projectDatail.projectName }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="项目编号">项目编号:</label>
                                <div class="pull-left" :title="projectDatail.projectId"  >{{ projectDatail.projectId }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="区域">区域:</label>
                                <!-- addressToText(projectDatail.addressOptions) -->
                                <div class="pull-left" :title="projectDatail.addressOptions" >{{ addressToText(projectDatail.addressOptions) }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="场地数">场地数:</label>
                                <div class="pull-left" :title="projectDatail.zoneNumber" >{{ projectDatail.zoneNumber }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="创建时间">创建时间:</label>
                                <!-- parseTime(projectDatail.createTime) -->
                                <div class="pull-left" :title="dealTime(projectDatail.createTime)" >{{ dealTime(projectDatail.createTime) }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="负责人">负责人:</label>
                                <div class="pull-left" :title="projectDatail.userName" >{{ projectDatail.userName }}</div>
                            </li>
                            <li class="list-group-item">
                               <label title="联系方式">联系方式:</label> 
                                <div class="pull-left" :title="projectDatail.phonenumber" >{{ projectDatail.phonenumber }}</div>
                            </li>
                        </ul>
                </el-card>
            </el-col>
            <el-col :span="19" :xs="24">
                <el-row
                    :gutter="10"
                    class="mb8 clearfix "
                    style="margin-top:2px;" 
                >
                    <el-col :span="18">
                        <el-form
                            :model="queryParams"
                            ref="queryForm"
                            v-show="showSearch"
                            :inline="true"
                        >
                            <el-form-item
                                label="分区名称"
                                prop="zoneName"
                            >
                                <el-input
                                    v-model="queryParams.zoneName"
                                    placeholder="请输入分区名称"
                                    clearable
                                    size="small"
                                    style="width: 240px"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    type="primary"
                                    icon="el-icon-search"
                                    size="mini"
                                    @click="handleQuery"
                                >搜索</el-button>
                                <el-button
                                    icon="el-icon-refresh"
                                    size="mini"
                                    @click="resetQuery"
                                >重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col
                        :span="1.5"
                        style="float:right;margin:1px 5px 0px 0px;"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="small"
                            @click="handleAddZone($event)"                         
                        >添加分区</el-button>
                    </el-col>
                </el-row>
                <div
                    class="table"
                    style="height:100%;background:white;padding:20px"
                >
                    <el-table
                        v-loading="loading"
                        :data="modelList"
                        row-key="taskId"
                        @selection-change="handleSelectionChange"
                        :tree-props="{children: 'zoneTasks'}"
                        class="zoneTask"
                        :header-cell-style="{background:'#DADDE9',color:'#000',height:'44px'}"
                    >
                        <el-table-column
                            type="selection"
                            width="80"
                            align="center" 
                        />
                        
                        <el-table-column
                            label="名称"
                            prop="taskName"
                            :show-overflow-tooltip="true"
                            width="150"
                        />
                        
                        <el-table-column
                            label="状态"
                            prop="state"
                            align="center"
                        >
                        <template slot-scope="scope">
                            <div v-if="scope.row.zoneTasks==undefined">
                                    <span :class="scope.row.status!='0'?'asss':'unass' " >{{ scope.row.status!='0'?"已分配":"未分配" }}</span>  
                            </div>
                            <div v-else>
                                    <span :class="scope.row.status!='0'?'fin':'unfin' " >{{ scope.row.status!='0'?"已完成":"进行中" }}</span>  
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column
                            label="编号"
                            prop="taskId"
                            width="280"
                            align="center"
                            sortable
                        />
                        <!-- <el-table-column
                            label="负责人"
                            prop="assignName"
                            align="center"
                        /> -->
                        <el-table-column
                            label="创建时间"
                            prop="createTime"
                            align="center"
                            width="250"
                        >
                            <template slot-scope="scope">
                                <span>{{ dealTime(scope.row.createTime) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding"
                        >
                            <template slot-scope="scope">
                                <div v-if="scope.row.zoneTasks!=undefined">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        icon="el-icon-edit"
                                        @click="handleUpdateZone(scope.row)"
                                    >修改分区</el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        icon="el-icon-delete"
                                        @click="handleDelete(scope.row)"
                                    >删除分区</el-button>
                                </div>
                                <div v-else>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="handleTask(scope.row)"
                                    >任务分派</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-row class="clearfix">
                        <el-button
                            class="delete"
                            plain
                            icon="el-icon-delete"
                            size="mini"
                            :disabled="multiple"
                            @click="handleDelete"
                        >删除</el-button>
                        <pagination
                            v-show="total>0"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getZoneList"
                        />
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- 添加或修改项目配置对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="openProject"
            :close-on-click-modal="false"
            custom-class="addAgency"
            append-to-body>
        <div class="formbox">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="80px"
            >
                <el-form-item
                    label="项目id"
                    prop="projectId"
                    v-show="false"
                >
                    <el-input v-model="form.projectId" />
                </el-form-item>
                <el-divider content-position="left" :style="{'margin-bottom':'18px'}"><strong>基础资料</strong></el-divider>
                <div class="proInfo">
                    <el-row>
                            <el-form-item
                                    label="项目名称"
                                    prop="projectName"
                                    
                                >
                                    <el-input
                                        v-model="form.projectName"
                                        placeholder="请输入项目名称"
                                    />
                            </el-form-item>
                      
                    </el-row>    
                    <el-form-item
                            label="项目区域"
                            prop="addressOptions"
                        >
                            <el-cascader
                                style="margin-right:13px"
                                size="large"
                                :options="addressOptions"
                                v-model="form.addressOptions"
                        
                            >
                            </el-cascader>
                            <el-input
                                style="width: 350px;"
                                v-model="form.address"
                                placeholder=""
                            />
                    </el-form-item>
                    <el-form-item
                            label="目的"
                            prop="purpose">
                            <el-input
                                v-model="form.purpose"
                                placeholder=""
                            />
                    </el-form-item> 
                    <el-row>
                        <el-col :span="10">
                            <el-form-item
                                label="方法设计"
                                prop="methodDesign"
                            >
                            <el-select v-model="form.methodDesignId" filterable placeholder="请选择"  @change="changeDeviceType($event)" >
                                <el-option
                                v-for="item in deviceOptions"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item
                            label="场地类型"
                            prop="siteType"
                            style="margin-left:20px;"
                            label-width="125px">
                            <el-input
                                v-model="form.siteType"
                            />
                            </el-form-item>    
                        </el-col>
                    </el-row>
                
                    <el-form-item
                        label="分区"
                        prop="zoneNa"
                        v-show="!Boolean(form.projectId)"
                        >
                        <el-input style="width:32%; margin-right:10px;"
                                v-model="zoneNa"
                            />
                        <el-button icon="el-icon-plus" type="primary" @click="addZone">点击添加</el-button>    
                    </el-form-item>
                    <el-row style="margin-left:100px" v-show="!Boolean(form.projectId)">
                                <el-tag
                                    v-for="(tag,index) in form.zoneNames"
                                    :key="index"
                                    closable
                                    :disable-transitions="false"
                                    @close="handleClose(index)"
                                    type="">
                                    {{tag}}
                                    </el-tag>
                    </el-row>
                </div>    
                <el-divider content-position="left" :style="{'margin-bottom':'18px'}"><strong>其他信息</strong></el-divider>
                <div class="otherInfo">
                     <el-row>
                        <el-col :span="10">
                            <el-form-item
                                label="负责人"
                                prop="userId"
                            >
                            <el-select v-model="form.userId" filterable @change="resetUserInfo($event)" placeholder="请选择"  >
                                        <el-option
                                            v-for="item in userOptions"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item
                            label="联系方式"
                            prop="phonenumber"
                            style="margin-left:20px;"
                            label-width="125px">
                            <el-input
                                v-model="form.phonenumber"
                            />
                            </el-form-item>    
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10">
                            <el-form-item
                                label="工艺"
                                prop="method"
                            >
                            <el-select v-model="form.method" filterable placeholder="请选择"  >
                                <el-option
                                v-for="item in methodOptions"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item
                            label="面积"
                            prop="acreage"
                            style="margin-left:20px;"
                            label-width="125px">
                            <el-input
                                v-model="form.acreage"
                                type="number"
                            />
                            </el-form-item>    
                        </el-col>
                    </el-row>
                    <!-- <el-form-item label="上传">
                        <el-upload ref="upload" :file-list="form.fileList" 
                        :on-success="handleChange"
                        :headers="headerToken"
                        :action="field102Action" 
                        :on-preview="handlePreview"
                        :before-remove="beforeRemove"
                        :on-remove="handleRemove" 
                        >
                            <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
                        </el-upload>
                    </el-form-item> -->
                </div>    
            </el-form>
            </div>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


        <!-- 修改/添加分区对话框 -->
         <el-dialog
            :title="zoneTitle"
            :visible.sync="openZone"
            :close-on-click-modal="false"
            append-to-body
        >
        <div class="formbox">
            <el-form
                ref="zoneForm"
                :model="zoneForm"
                :rules="zoneRules"
                label-width="80px"
            >
                <el-form-item
                    label="分区id"
                    prop="zoneId"
                    v-show="false"
                >
                    <el-input v-model="zoneForm.zoneId" />
                </el-form-item>
                <el-form-item
                    label="所属项目"
                    prop="projectNameZone"
                >
                    <el-input
                        :readonly="true"
                        v-model="zoneForm.projectName"
                    />
                </el-form-item>
                <el-form-item
                    label="分区名称"
                    prop="zoneName"
                >
                    <el-input
                        v-model="zoneForm.zoneName"
                        placeholder="分区名称"
                    />
                </el-form-item>
                <el-form-item
                            label="分区位置"
                            prop="addressOptions"
                        >
                            <el-cascader
                                size="large"
                                style="margin-right:13px"
                                :options="addressOptions"
                                v-model="zoneForm.addressOptions"
                            >
                            </el-cascader>
                            <el-input
                                style="width: 350px;"
                                v-model="zoneForm.address"
                                placeholder=""
                            />
                </el-form-item>       
                <el-form-item
                    label="方法设计"
                    prop="methodDesignId"
                >
                    <el-select v-model="zoneForm.methodDesignId" filterable @change="resetMethodInfo($event)" placeholder="请选择"  >
                                        <el-option
                                            v-for="item in taskOptions"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.id">
                                            </el-option>
                                        </el-select> 
                            <el-input
                                :readonly="true"
                                style="margin-top:20px"
                                v-model="zoneForm.tasksName"
                            />
                </el-form-item>
                <el-form-item label="分区概况">
                    <el-input
                        v-model="zoneForm.remark"
                        type="textarea"
                        placeholder=""
                    ></el-input>
                </el-form-item>
            </el-form>
            </div>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitZoneForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 任务分派 -->
        <el-dialog
        :title="taskTitle"
        :visible.sync="openTask"
        append-to-body>
            <el-form
                ref="taskForm"
                :model="taskForm"
                :close-on-click-modal="false"
                :rules="taskRules"
                label-width="80px"
            >
                <el-form-item
                    label="任务id"
                    prop="taskId"
                    v-show="false"
                >
                <el-input v-model="taskForm.taskId" />
                </el-form-item>
                <el-form-item
                    label="所属分区"
                >
                <el-input
                        :readonly="true"
                        v-model="taskForm.zoneName"
                    />
                </el-form-item>   
                <el-form-item
                    label="分区编号"
                    prop="zoneId"
                    v-show="false"
                >
                <el-input v-model="taskForm.zoneId" />
                </el-form-item>  
                <el-form-item
                    label="方法设计"
                    prop="taskDesignId"
                >
                <el-select v-model="taskForm.methodDesignId" filterable  :disabled="true" >
                                    <el-option
                                        v-for="item in taskOptions"
                                        :key="item.id"
                                        :label="item.label"
                                        :value="item.id">
                                        </el-option>
                                    </el-select> 
                        <el-input
                            :readonly="true"
                            style="margin-top:20px"
                            v-model="taskForm.taskName"
                        />
                </el-form-item>
                <el-form-item label="指派选择" prop="assignType" >
                            <el-radio-group v-model="taskForm.assignType"  @change="handleradio()" >
                                <el-radio label='0' >机构成员</el-radio>
                                <!-- <el-radio label='1' >其他机构</el-radio> -->
                            </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="指派对象"
                    prop="assignIds"
                    >
                    <template v-if="taskForm.assignType=='0'">
                        <el-select v-model="taskForm.assignIds" multiple class="select-assign"  @change="handleAssign($event,'userOptions')" placeholder="请选择" >
                                    <el-option
                                        v-for="item in userOptions"
                                        :key="item.id"
                                        :label="item.label"
                                        :value="item.id">
                                        </el-option>
                            </el-select>
                        
                    </template>
                    <template v-else>
                        <el-select v-model="taskForm.assignIds" filterable @change="handleAssign($event,'agencyOptions')" placeholder="请选择"  >
                                    <el-option
                                        v-for="item in agencyOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                        </el-select>
                    </template>
                </el-form-item>
               
                
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitTask"
                    
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listProject,addProject,getProject,updateProject,listZone,delZone,addProZone,updateProZone,getProZone,getZoneTask,updateProZoneTask} from "@/api/project/project";
import { saveAs } from 'file-saver'
import { listUserAll,delFile} from "@/api/system/user";
import { listAgencyAll } from "@/api/system/agency";
import { getToken } from "@/utils/auth";
export default {
    name: "project",
    components: { projectList:() => import('./projectList') },
    data() {
        return {
            headerToken:{},
            ownType:"1",
            //项目列表
            projectListData:[],
            //项目详情
            projectDatail:{},
            //传入子组件数据列表
            porpData:{
                projectListData1:[],
                projectListData2:[],
                projectListData3:[]
            },
            // 遮罩层
            loading: false,
            // 是否显项目示弹出层
            openProject: false,
            //是否显示分区弹出层
            openZone:false,
            // 机构下拉
            agencyOptions:[],
            //方法设计选择
            taskOptions:this.$store.getters.taskOptions,
            //设备类型options
            deviceOptions:this.$store.getters.deviceType,
            //工艺选项
            methodOptions:this.$store.getters.methodsOptions,
            //用户选择Options
            userOptions:[],
            //地址选择
            addressOptions: this.regionData,
            // 选中数组
            ids: [],
            //上传文件地址
            field102Action: '/dev-api/zotask/uploadFile',
            // 模型表格数据
            modelList: [],
            // 显示搜索条件
            showSearch: true,
            //项目列表请求参数
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                zoneName: undefined
            },
            // 总条数
            total: 0,
            // 非多个禁用
            multiple: true,
            // x项目弹出层标题
            title: "",
            //分区弹出层
            zoneTitle:"",
            // 是否显示弹出层（数据权限）
            openDataScope: false,
            menuExpand: false,
            menuNodeAll: false,
            deptExpand: true,
            deptNodeAll: false,
            //分区tag
            zoneNa:"",
            // 项目表单参数
            form: {
                //自定义参数
                zoneNames:[]
            },
            defaultProps: {
                children: "children",
                label: "label"
            },
            //分区表单参数
            zoneForm:{},
            //任务表单参数
            taskForm:{},
            // 表单校验
            rules: {
                projectName: [
                    { required: true, message: "项目名称不能为空", trigger: "blur" }
                ],
                addressOptions: [
                    { required: true, message: "区域必须选择", trigger: "blur" }
                ],
                userId: [
                    { required: true, message: "项目负责人不能为空", trigger: "blur" }
                ],
                phonenumber: [
                    { required: true, message: "联系电话不能为空", trigger: "blur" }
                ],
                
                
            },
            zoneRules:{
                zoneName: [
                    { required: true, message: "分区名称不能为空", trigger: "blur" }
                ],
                addressOptions: [
                    { required: true, message: "分区地址不能为空", trigger: "blur" }
                ],
                methodDesignId: [
                    { required: true, message: "设计方法不能为空", trigger: "blur" }
                ],
            },
            taskRules:{
                // assignIds: [
                //     { required: true, message: "指派对象不能为空", trigger: "blur" }
                // ],    
            },
            // 指派任务弹出层
            openTask:false,
            taskTitle:""
        };

    },
    created() {
        this.headerToken['GeomativeAuthorization']='Geomative ' + getToken();
        this.getProList();
        this.getOptionsUser();
        // this.getZoneList();
    },
    watch:{
        projectDatail(val){
            this.getZoneList();
        }
    },
    methods: {
        getZoneList() {
            this.loading = true;
            const queryId = this.projectDatail.projectId;
            this.queryParams.projectId = queryId;
            listZone(this.queryParams).then(
                response => {
                    this.modelList = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                }
            );
        },
        //获取子组件传过来的项目信息
        showProject(proData){
            if(proData!=undefined){
                getProject(proData.projectId).then(
                    response=>{
                        this.projectDatail = response.data;
                        this.projectDatail.addressOptions = JSON.parse(response.data.addressOption)
                    }
                )
            }
            
        },
        //子组件要求重新获取列表
        onReturn(val){
            this.getProList()
        },
        //点击标签
        handleClick(tab, event){
            this.activeName = tab.name
            this.getProList(); 
        },
        // 获取项目数据
        getProList() {
            listProject(this.ownType).then(
                response => {
                    if(this.ownType=="1"){
                        this.porpData.projectListData1=response.data
                    }
                    else if(this.ownType=="2"){
                        this.porpData.projectListData2=response.data
                    }
                    else{
                        this.porpData.projectListData3=response.data
                    }
                    this.projectListData = response.data;
                }
            );
        },
        //获取机构用户列表，并转为options数据
        getOptionsUser(){
            const Params = {
                pageNum: 1,
                pageSize: 10000};
            listUserAll().then(
                response => {
                    this.userOptions = response.data.map(item => { return {"id":item["userId"],"label":item["userName"],"telephone":item["telephone"],"agencyId":item["agencyId"]} })  
                }
            );
            listAgencyAll().then(
                response => {
                    this.agencyOptions = this.resetOptions(response.data,"agencyId","agencyName");
                }
            )
        },
        //用户选择联动
        resetUserInfo(value){
            const valueObj= this.userOptions.find((item)=>{return item.id === value;});
            this.form.userName = valueObj.label;
            this.form.phonenumber = valueObj.telephone;
            this.form.agencyId = valueObj.agencyId
        },
        //分区方法设计选择联动
        resetMethodInfo(value){
        
            const valueObj= this.taskOptions.find((item)=>{return item.id === value;});
            // console.log(valueObj);
            if(valueObj!=undefined){
                this.zoneForm.methodDesign = valueObj.label;
                this.zoneForm.tasks=valueObj.tasks.map((val)=>{return val.label });
                this.zoneForm.tasksName = this.zoneForm.tasks.join('、')
            }

        },
        //项目方法设计联动
        changeDeviceType(val){
            const valueObj= this.taskOptions.find((item)=>{return item.id === val;});
            this.form.methodDesign = valueObj.label;
        },
        //删除文件
        beforeRemove(file, fileList){
            // return this.$confirm(`确定移除 ${ file.name }？`);
            return this.$confirm( `是否确认删除此文件?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })  
        },
        //删除文件
        handleRemove(file, fileList) {
            this.form.fileList.forEach((item,index)=>{
                if(item.uid===file.uid){
                    this.form.fileList.splice(index,1);
                }
            })
            delFile(file);
        },
        //下载文件
        handlePreview(file) {
            saveAs(file.url, file.name)
        },
        //文件上传成功改变
        handleChange(response,file, fileList){
            this.form.fileList.push(response.data[0]);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item['zoneId'])
            this.multiple = !selection.length
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getZoneList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 项目表单重置
        reset() {
            this.menuExpand = false,
            this.menuNodeAll = false,
            this.deptExpand = true,
            this.deptNodeAll = false,
            this.form = {
                zoneNames:[],
                projectId: undefined,
                addressOptions:[],
                address:undefined,
                projectName: undefined,
                purpose:undefined,
                methodDesignId:undefined,
                methodDesign:undefined,
                siteType:undefined,
                userId:undefined,
                userName:undefined,
                phonenumber:undefined,
                method:undefined,
                acreage:undefined,
                createName:undefined,
                createTime:undefined,
                fileList:[],
                agencyId:undefined,
            };
            this.resetForm("form");
        },
        //重置分区表单
        restZone(){
             this.zoneForm = {
                projectId:this.projectDatail.projectId,
                projectName:this.projectDatail.projectName,
                zoneId:undefined,
                zoneName:undefined,
                addressOptions:[],
                address:undefined,
                methodDesignId:undefined,
                methodDesign:undefined,
                tasks:[],
                tasksName:undefined,
                remark:undefined,
             }
            this.resetForm("zoneForm");
        },
        //重置分区表单
        resttask(){
             this.taskForm = {
                zoneName:undefined,
                zoneId:undefined,
                taskId:undefined,
                methodDesignId:undefined,
                tasksName:undefined,
                assignType:undefined,
                assignIds:undefined,
                assignName:undefined,
                state:undefined,
             }
            this.resetForm("zoneForm");
        },
        /** 新增项目按钮操作 */
        handleAdd() {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:project:add')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.reset();
            this.openProject = true;
            this.title = "新增项目";
        },
        // 新增分区按钮操作
        handleAddZone(){
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:zone:add')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.restZone();
            this.openZone = true;
            this.zoneTitle = "新增分区";
        },
        /** 项目修改按钮操作 */
        handleUpdateProject(proId) {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:project:update')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.reset();
            getProject(proId).then(response => {
                this.form = response.data;
                this.form.addressOptions =JSON.parse(response.data.addressOption);
                this.openProject = true;
                this.title = "修改项目详情";
            });
        },
        /** 分区修改按钮操作 */
        handleUpdateZone(zoneRow) {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:zone:update')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.restZone();
            getProZone(zoneRow.taskId).then(response => {
                this.zoneForm = response.data;
                this.zoneForm.addressOptions = JSON.parse(response.data.addressOption)
                this.resetMethodInfo(response.data.methodDesignId)
                this.openZone = true;
                this.zoneTitle = "修改分区详情";
            });
        },
        // 任务指派按钮
        handleTask(Row){
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:task:assign')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.resttask();
            getZoneTask(Row.taskId).then(response => {
                this.taskForm = response.data;
                this.taskForm.assignType=this.taskForm.assignType||'0';
                this.openTask = true;
                this.taskTitle = "任务指派";
            });
        },
        //任务提交按钮
        submitTask(){
            // if(this.taskForm.assignIds.length!=0){
            //     this.Message({
            //         message:"不允许再分配!",
            //         type:'error'
            //     })
            //     return;
            // }
             this.$refs["taskForm"].validate(valid => {
                 if (valid) {
                     this.taskForm.state=1;
                     updateProZoneTask(this.taskForm).then(response => {
                            this.msgSuccess("分派成功");
                            this.openTask = false;
                            this.getZoneList();
                        });
                 }
             })
        },
        created() {
            this.getZoneList();
        },
        /** 项目编辑和新建提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.projectId != undefined) {
                        updateProject(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.openProject = false;
                            this.getProList();
                        });
                    } else {
                        addProject(this.form).then(response => {
                            this.msgSuccess("添加成功");
                            this.openProject = false;
                            this.getProList();
                        });
                    }
                }
            })
        },
        // 分区编辑和新建提交按钮
        submitZoneForm() {
            this.$refs["zoneForm"].validate(valid => {
                if (valid) {
                    if (this.zoneForm.zoneId != undefined) {
                        updateProZone(this.zoneForm).then(response => {
                            this.msgSuccess("修改成功");
                            this.openZone = false;
                            this.getZoneList();
                        });
                    } else {
                        addProZone(this.zoneForm).then(response => {
                            this.msgSuccess("添加成功");
                            this.openZone = false;
                            this.getZoneList();
                        });
                    }
                }
            })
        },
        // 取消按钮
        cancel() {
            this.openProject = false;
            this.openZone = false;
            this.openTask = false;
            this.reset();
        },
        //新建项目添加分区
        addZone(){
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:zone:add')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            if(this.zoneNa==""){
                this.Message({
                    message:"添加分区必须指定名称",
                    type:'error'
                })
                return;
            }
            const zoneName=this.zoneNa;
            this.form.zoneNames.push(zoneName)
            this.zoneNa= "";
        },
        //移除参数
        handleClose(id){
            this.form.zoneNames.splice(id,1)
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:zone:delete')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            let zoneIds = undefined;
            if (row.taskId == null) {
                zoneIds = this.ids
            } else {
                zoneIds = [row.taskId]
            }
            // console.log(this.ids)
            this.$confirm(`是否确认删除此 ${zoneIds.length} 条分区据项?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delZone(zoneIds);
            }).then(() => {
                this.getZoneList();
                this.msgSuccess("删除成功");
            }).catch(() => { })
        },
        //指派对象操作
        handleAssign(val,ty){
            let valueObj="";
            if(ty=='userOptions'){
                valueObj= this.userOptions.filter(
                    (item)=>{return item.id == val;});
            }
            else{
                valueObj= this.agencyOptions.filter((item)=>{return item.value == val;});
            }
            this.taskForm.assignName = valueObj.label;
        },
        //切换指派方式清空原有指派对象
        handleradio(){
            this.taskForm.assignorId="";
        }
    }
}
</script>
<style scoped>
.description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-block-end: 0px;
    margin-block-start: 0px;
}

.clearfix .el-form-item {
    margin-bottom: 5px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: ""; /*不用有内容也可以*/
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.delete {
    margin-top: 25px;
    margin-left: 1px;
}
.formbox{
    /* padding:20px 20px; */
}
.projectManage{
    height: 100%;
    width: 100%;
    background: white;
}
.addPro{
    text-align: center;
}
.addPro button{
    display: inline-block;
    margin-top: 15px;
}
.projectCard ul{
    margin: 0px 0px;
}
.proDatail .el-card__body{
    padding: 0px 0px;
}
.list-group-item{
    border: none;
    padding: 8px 0px;
}
.list-group-item label{
    display: inline-block;
    width: 25%;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list-group-item .pull-left{
    margin-left: 7%;
    display: inline-block;
    text-align: left;
    width: 68%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.DatailCard{
    padding: 0px 6px;
}
.proDatail{
    margin-top: 30px;
    padding-bottom: 15px;
}

.otherInfo,.proInfo{
    padding:0px 40px;
}
.el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 10px;
}
.unfin{
    color: #FFAB76;
}
.fin{
    color: #62D566;
}
.asss,.unass{
    color: white;
    font-size: 10px !important;
    padding: 2px;
    border-radius: 2px;
}
.asss{
    
    background:#62D566 ;
    
}
.unass{
  background: #FFAB76;
}
.select-assign{
    width: 70%;
}
</style>

